<template>
  <div class="user-list">
    <de-container class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :data="tableData"
        :option="tableOption"
        :page.sync="page"
        :search.sync="searchForm"
        :table-loading="tableLoading"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @keyup.enter="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
      >
        <template slot="createdAtSearch" slot-scope="{ size }">
          <el-date-picker
            v-model="daterange"
            :size="size"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
            @change="onDateRangeChange"
          >
          </el-date-picker>
        </template>
        <template slot="successFlag" slot-scope="{ row }">
          <span v-if="row.successFlag == 'Y'">是</span>
          <span v-else>否</span>
        </template>
        <template slot="menu" slot-scope="{ size, row }">
          <el-button :size="size" icon="el-icon-view" type="text" @click="onAddDetail(row)"> 查看内容 </el-button>
        </template>
      </avue-crud>
    </de-container>
    <Detail v-model="showDetail" :content="currentRow.content" :title="currentRow.title" type="通知"></Detail>
  </div>
</template>

<script>
import { requestInfoRecord, requestInfoRecordRead } from '@/api'
import ListMixin from '@/utils/mixins/list-mixin'
import Detail from '@/layout/components/notice/components/Detail'
import DeContainer from '@/components/dataease/DeContainer.vue'

export default {
  name: 'Record',
  components: { DeContainer, Detail },
  mixins: [ListMixin],
  data() {
    return {
      showDetail: false,
      currentRow: {},
      listApi: requestInfoRecord,
      tableOption: {
        menuWidth: 150,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        index: true,
        selection: false,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '发送方',
            prop: 'senderName',
            search: true,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
          {
            label: '消息id',
            prop: 'taskId',
            search: false,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
          {
            label: '接收人',
            prop: 'name',
            search: true,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
          {
            label: '发送时间',
            prop: 'sendTime',
            type: 'date',
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
            search: true,
            valueFormat: 'yyyy-MM-dd',
            searchSpan: 8,
            searchslot: true,
            editDisplay: false,
            addDisplay: false,
            viewDisplay: false,
          },
          {
            label: '渠道',
            prop: 'sendWay',
            width: 160,
            type: 'select',
            dicData: [
              {
                label: '短信',
                value: 'sms',
              },
              {
                label: '邮件',
                value: 'email',
              },
              {
                label: '站内信',
                value: 'notice',
              },
              {
                label: '飞书',
                value: 'feishu_robot',
              },
            ],
            search: true,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
            value: '站内通知',
          },
          {
            label: '消息类型',
            prop: 'noticeTypeName',
            search: false,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
          {
            label: '是否成功',
            prop: 'successFlag',
            search: false,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
        ],
      },
    }
  },
  methods: {
    onAddDetail(row) {
      this.currentRow = row
      this.showDetail = true
      requestInfoRecordRead({
        id: row.msgId,
      })
    },
  },
}
</script>

<style lang="scss"></style>
